<template>
  <div id="designTaskDetail">
    <div class="designTaskDetailCon">
      <div class="worksDetailNavInfo">
        <p @click="handleMaster()">创意集市</p><span>&gt;</span><p @click="handleTask()">设计|制作任务</p><span>&gt;</span><p>任务详情</p>
      </div>
      <div class="designTaskDetailConBox">
        <div class="designTaskDetailLeft">
          <div class="designTaskDetailReceive">
            <h2>{{taskData.title}}</h2>
            <p><span>发布时间: {{taskData.createTime}}</span> <span style="padding-left: .2rem;">有效期{{taskData.expiryDate}}天</span></p>
            <p><i>￥{{taskData.price}}</i>RMB</p>
            <div class="btnBox">
              <button class="btnDef" @click="onUpTask()">{{taskText}}</button>
            </div>
          </div>
          <div class="designTaskDetailRequireCon">
            <div class="designTaskDetailRequireConProject">
              <h3>项目详情：</h3>
              <p v-html="taskData.detail"></p>
            </div>
            <div class="designTaskDetailRequireConProject">
              <h3>设计师详情：</h3>
              <p v-html="taskData.designerAsk"></p>
            </div>
          </div>
        </div>
        <div class="designTaskDetailRight">
          <div class="designTaskDetailPublisher">
            <img :src="$globalImageUrl + taskData.avatar" alt="" @click="jumpTo('/stylistInfo?stylistUserId=' + (taskData.createId))">
            <p>姓名：{{taskData.userName}}</p>
            <p>手机号：{{taskData.phone}}</p>
            <div class="btnBox">
              <button class="btnDef" @click="submitInstationMsgPopup = true">站内信</button>
            </div>
          </div>
        </div>
      </div>
      <div class="courseDetailContetnRecommend">
        <h2 class="courseDetailContetnRecommendTitle">同类任务推荐</h2>
        <div style="padding: .2rem;">
          <ul>
            <li v-for="(item, index) in recommendTaskData" :key="index" @click="handleTaskDetail(item.id)">
              <img :src="item.avatar && ($globalImageUrl + item.avatar)" alt="">
              <div class="practicalClassroomContentCourseInfo">
                <h3 class="ellipse">{{item.title}}</h3>
                <div>
                  <p class="ellipse">交易{{item.expiryDate}}次</p>
                  <p style="padding-top: .1rem;">
                    <i>￥{{item.price}}</i>
                  </p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <popup v-model="submitTaskPopup" position="top">
        <div class="courseDetailSubmitTaskPopup">
          <div class="userApprovePopupTitle">
            <h2>提交任务</h2>
            <i @click="submitTaskPopup = false">x</i>
          </div>
          <div class="userAchievemenPopupContent">
            <textarea name="" placeholder="请输入任务描述" v-model="submitTaskDescribe"></textarea>
            <label for="uploadAchievementId">
<!--              <img :src="submitTaskImg" alt="">-->
              <input type="file" id="uploadAchievementId" @change="onSubmitTaskImg($event)">
            </label>
            <div class="userAchievemenPopupButton">
              <div class="btnBox">
                <button class="btnDef" @click="handSubmitNeeds()">确定</button>
                <button class="btnDef btnClose" @click="submitTaskPopup = false">取消</button>
              </div>
            </div>
          </div>
        </div>
      </popup>
      <popup v-model="submitInstationMsgPopup" position="top">
        <div class="designTaskDetailInstationMsgPopup">
          <div class="userApprovePopupTitle">
            <h2>站内信</h2>
            <i @click="submitInstationMsgPopup = false">x</i>
          </div>
          <div class="designTaskDetailInstationMsgPopupCon">
            <textarea v-model="submitInstationMsgContent"></textarea>
            <div class="btnBox">
              <button class="btnDef" @click="handSendMessage()">提交</button>
            </div>
            <div style="height: .42rem;"></div>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import { Popup } from 'vux'
export default {
  name: 'designTaskDetail',
  components: {
    Popup
  },
  data () {
    return {
      taskId: this.$route.query.taskId,
      taskData: {},
      recommendTaskData: {},
      taskStatus: {}, // status 0 等待审核 status 1 审核通过 status 2 审核失败 status 3 未领取
      // taskText: '接取任务',
      submitTaskPopup: false,
      submitTaskImg: '',
      submitTaskDescribe: '',
      submitInstationMsgPopup: false,
      submitInstationMsgContent: ''
    }
  },
  created () {
    this.fetchOneNeeds()
    this.fetchNeedsStatus()
    this.fetchSameNeeds()
  },
  computed: {
    taskText () {
      let text = '接取任务'
      if (this.taskStatus.status === 3) {
        text = '接取任务'
      } else if (this.taskStatus.status !== 3) {
        text = '提交任务'
      } else {
        text = '接取任务'
      }
      return text
    }
  },
  methods: {
    // 跳转到任务详情
    handleTaskDetail (id) {
      this.$router.push('/designTaskDetail?taskId=' + id )
      location.reload();
    },
    // 锚点跳转到创意集市
    handleMaster () {
      this.$router.push('/ideaMarket')
    },
    // 锚点跳转回集市
    handleTask () {
      this.$router.push('/designTask')
    },
    // 点击接取任务
    onUpTask () {
      if (this.taskStatus.status === 3) {
        this.fetchAcceptNeeds()
      } else if (this.taskStatus.status !== 3) {
        this.submitTaskPopup = true
      }
    },
    // 选择文件
    onSubmitTaskImg (e) {
      if (e.target.files[0].size >= 1024 * 1024 * 2) {
        this.$vux.toast.text('上传文件不能大于2MB')
        return
      }
      var reader = new FileReader()
      reader.readAsDataURL(e.target.files[0])
      // onload为读取后的回调函数
      reader.onload = (e) => {
        this.submitTaskImg = e.target.result
      }
    },
    // 获取任务详情
    fetchOneNeeds () {
      this.$api.getOneNeeds({
        id: this.taskId
      }).then(res => {
        if (res.code === 0) {
          this.taskData = res.data
          console.log(res.data)
        }
      })
    },
    // 判断任务状态
    fetchNeedsStatus () {
      this.$api.getNeedsStatus({
        needsId: this.taskId,
        userId: this.$store.state.user.userId
      }).then(res => {
        if (res.code === 0) {
          this.taskStatus = res.data
        }
      })
    },
    // 接取任务
    fetchAcceptNeeds () {
      this.$api.getAcceptNeeds({
        needsId: this.taskId,
        userId: this.$store.state.user.userId
      }).then(res => {
        if (res.code === 0) {
          this.fetchNeedsStatus()
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // 提交任务
    handSubmitNeeds () {
      this.$api.getSubmitNeeds({
        needsId: this.taskId,
        userId: this.$store.state.user.userId,
        file: this.submitTaskImg,
        introduce: this.submitTaskDescribe
      }).then(res => {
        if (res.code === 0) {
          this.submitTaskPopup = false
          this.fetchNeedsStatus()
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // 同类任务推荐
    fetchSameNeeds () {
      this.$api.getSameNeeds({
        id: this.taskId
      }).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.recommendTaskData = res.data
        }
      })
    },
    // 站内信
    handSendMessage () {
      if (this.submitInstationMsgContent === '') {
        this.$vux.toast.text('请输入内容')
        return
      }
      this.$api.postSendMessage({
        sender: this.$store.state.user.userId,
        messageContent: this.submitInstationMsgContent,
        receiver: this.taskData.userId
      }).then(res => {
        if (res.code === 0) {
          this.$vux.toast.text('发送成功')
          setTimeout(() => {
            this.submitInstationMsgPopup = false
          }, 500);
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
#designTaskDetail{
  .designTaskDetailCon{
    width: 1200px;
    margin: auto;
    padding-top: .5rem;
    /deep/ .vux-popup-dialog.vux-popup-top {
      width: 6rem;
      top: 50%;
      right: auto;
      bottom: auto;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .designTaskDetailConBox{
      font-size: 0;
      margin-bottom: .2rem;
      .designTaskDetailLeft{
        display: inline-block;
        width: 70%;
        vertical-align: top;
        padding-right: .3rem;
        .designTaskDetailReceive{
          background-color: #fff;
          margin-bottom: .2rem;
          padding: .2rem;
          position: relative;
          h2{
            font-size: .30rem;
            font-weight: 500;
            line-height: .46rem;
            color: #333;
          }
          p{
            span{
              font-size: .14rem;
              font-weight: 500;
              line-height: .22rem;
              color: #999;
            }
            i{
              font-size: .24rem;
              font-weight: 500;
              line-height: .4rem;
              color: #ee6d70;
              font-style: normal;
            }
          }
          .btnBox{
            position: absolute;
            right: .2rem;
            top: 50%;
            transform: translateY(-50%);
            .btnDef{
              padding: 0 .2rem;
            }
          }
        }
        .designTaskDetailRequireCon{
          background-color: #fff;
          // padding: .2rem;
          .designTaskDetailRequireConProject{
            padding: .2rem;
            border-bottom: 1px solid #eee;
            h3{
              font-size: .2rem;
              font-weight: 500;
              line-height: .24rem;
              color: #333;
              margin-bottom: .2rem;
            }
            p{
              font-size: .16rem;
              font-weight: 500;
              line-height: .24rem;
              color: #333;
            }
          }
        }
      }
      .designTaskDetailRight{
        display: inline-block;
        width: 30%;
        vertical-align: top;
        .designTaskDetailPublisher{
          background-color: #fff;
          padding: .2rem;
          img{
            width: 1rem;
            height: 1rem;
            display: block;
            margin: .2rem auto;
          }
          p{
            font-size: .16rem;
            font-weight: 500;
            line-height: .24rem;
            color: #333;
            text-align: center;
            padding-bottom: .2rem;
          }
          .btnBox{
            margin-top: .1rem;
            button{
              border-radius: 0;
              background-color: #fff;
              color: #15A29C;
              line-height: .3rem;
            }
          }
        }
      }
    }
    .courseDetailContetnRecommend{
      background-color: #fff;
      .courseDetailContetnRecommendTitle {
        font-size: .2rem;
        font-weight: 500;
        color: #15A29C;
        line-height: .32rem;
        padding: .2rem;
        border-bottom: 0.01rem solid #eee;
      }
      ul{
        li:nth-child(5n){
          margin-right: 0;
        }
        li{
          display: inline-block;
          margin-right: .125rem;
          margin-bottom: .125rem;
          box-shadow: 0 0 10px #eee;
          img{
            display: inline-block;
            width: 2.22rem;
            height: 1.5rem;
          }
          .practicalClassroomContentCourseInfo{
            padding: .1rem;
            position: relative;
            h3{
              font-weight: 500;
              color: #333;
              font-size: .16rem;
              line-height: .24rem;
            }
            div.publicBookRemark{
              padding: 0 .05rem;
              img{
                width: .12rem;
                height: .12rem;
                display: inline-block;
              }
              span{
                font-size: 0.13rem;
                font-weight: 500;
                color: #aaa;
                line-height: 0.16rem;
              }
            }
            p{
              font-weight: 500;
              color: #666;
              font-size: .14rem;
              line-height: .22rem;
              i{
                font-weight: 500;
                color: red;
                font-size: .14rem;
                line-height: .22rem;
                font-style: normal;
              }
              b{
                text-decoration: line-through;
                font-weight: 500;
                color: #999;
                font-size: .14rem;
                line-height: .22rem;
                padding-left: .05rem;
              }
            }
            .btnBox{
              display: inline-block;
              float: right;
              position: absolute;
              right: .1rem;
              bottom: .1rem;
              .btnDef{
                font-size: .14rem;
                line-height: .25rem;
                padding: 0 .05rem;
              }
            }
          }
        }
      }
    }
    .courseDetailSubmitTaskPopup{
      background-color: #fff;
      .userApprovePopupTitle{
        background-color: #15A29C;
        padding: .15rem .2rem;
        h2{
          font-size: .2rem;
          font-weight: 500;
          color: #fff;
          line-height: .28rem;
          display: inline-block;
        }
        i{
          font-style: normal;
          color: #fff;
          float: right;
          width: .25rem;
          text-align: center;
        }
      }
      .userAchievemenPopupContent{
        padding: .2rem;
        h2{
          font-size: .18rem;
          font-weight: 500;
          color: #333;
          line-height: .26rem;
          padding-bottom: .2rem;
          input{
            font-size: .18rem;
            font-weight: 500;
            color: #333;
            line-height: .26rem;
          }
        }
        textarea{
          font-size: .16rem;
          font-weight: 500;
          color: #333;
          line-height: .24rem;
          width: 100%;
          border: 1px solid #eee;
          height: 2rem;
        }
        /*label{*/
        /*  background-color: #fff;*/
        /*  border: 1px solid #ccc;*/
        /*  display: inline-block;*/
        /*  width: 1.5rem;*/
        /*  height: 1.5rem;*/
        /*  img{*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    display: inline-block;*/
        /*    background-color: #fff;*/
        /*  }*/
        /*}*/
        .userAchievemenPopupButton{
          text-align: right;
          height: .42rem;
          margin-top: .2rem;
          .btnBox{
            width: 2rem;
            float: right;
            .btnClose{
              margin-left: .2rem;
            }
          }
        }
      }
    }
    .designTaskDetailInstationMsgPopup{
      background-color: #fff;
      .userApprovePopupTitle{
        background-color: #15A29C;
        padding: .15rem .2rem;
        h2{
          font-size: .2rem;
          font-weight: 500;
          color: #fff;
          line-height: .28rem;
          display: inline-block;
        }
        i{
          font-style: normal;
          color: #fff;
          float: right;
          width: .25rem;
          text-align: center;
        }
      }
      .designTaskDetailInstationMsgPopupCon{
        padding: .2rem;
        textarea{
          width: 100%;
          height: 3rem;
          margin-bottom: .2rem;
          border: 1px solid #eee;
        }
        .btnBox{
          width: 2rem;
          float: right;
          .btnDef{

          }
        }
      }
    }
  }
}
</style>
